<template>
  <BaseCard
    :class="cardClass"
    :clickable="clickable"
    @click="handleClick"
  >
    <!-- 左侧封面 -->
    <view class="novel-cover">
      <image
        :src="novel.cover"
        :alt="novel.title"
        class="cover-image"
        mode="aspectFill"
        @error="handleImageError"
      />

      <!-- 阅读进度条 -->
      <view v-if="showProgress && novel.progress" class="progress-bar">
        <view class="progress-fill" :style="{ width: `${novel.progress}%` }"></view>
      </view>

      <!-- 状态标签 -->
      <view v-if="novel.status" class="status-badge">
        <BaseBadge
          :type="getStatusType(novel.status)"
          :value="novel.status"
          size="small"
        />
      </view>
    </view>

    <!-- 右侧信息 -->
    <view class="novel-info">
      <!-- 标题 -->
      <text class="novel-title">{{ novel.title }}</text>

      <!-- 作者 -->
      <text class="novel-author">作者：{{ novel.author }}</text>

      <!-- 分类和标签 -->
      <view class="novel-meta">
        <text class="category-tag">{{ novel.category }}</text>
        <view v-if="novel.tags && novel.tags.length > 0" class="tags-container">
          <text
            v-for="tag in novel.tags.slice(0, 2)"
            :key="tag"
            class="tag-item"
          >
            {{ tag }}
          </text>
        </view>
      </view>

      <!-- 简介 -->
      <text class="novel-description">{{ novel.description }}</text>

      <!-- 底部信息 -->
      <view class="novel-footer">
        <view class="stats">
          <text v-if="novel.wordCount" class="stat-item">
            <text class="i-carbon-document mr-1"></text>
            {{ formatWordCount(novel.wordCount) }}
          </text>
          <text v-if="novel.rating" class="stat-item">
            <text class="i-carbon-star mr-1"></text>
            {{ novel.rating }}
          </text>
          <text v-if="novel.readCount" class="stat-item">
            <text class="i-carbon-view mr-1"></text>
            {{ formatCount(novel.readCount) }}
          </text>
        </view>

        <!-- 操作按钮 -->
        <slot name="actions">
          <BaseButton
            v-if="showActionButton"
            :type="getActionType()"
            size="small"
            @click.stop="handleAction"
          >
            {{ getActionText() }}
          </BaseButton>
        </slot>
      </view>
    </view>

    <!-- 右上角菜单 -->
    <view v-if="showMenu" class="novel-menu" @click.stop>
      <BaseIcon
        name="i-carbon-overflow-menu-horizontal"
        size="small"
        clickable
        @click="handleMenuClick"
      />
    </view>
  </BaseCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BaseCard from '../ui/BaseCard.vue'
import BaseButton from '../ui/BaseButton.vue'
import BaseIcon from '../ui/BaseIcon.vue'
import BaseBadge from '../ui/BaseBadge.vue'

interface Novel {
  id: string
  title: string
  author: string
  cover: string
  category: string
  description: string
  tags?: string[]
  status?: string
  progress?: number
  wordCount?: number
  rating?: number
  readCount?: number
  isInLibrary?: boolean
  isFavorite?: boolean
}

interface Props {
  // 小说数据
  novel: Novel
  // 是否可点击
  clickable?: boolean
  // 布局类型
  layout?: 'horizontal' | 'vertical'
  // 是否显示进度条
  showProgress?: boolean
  // 是否显示操作按钮
  showActionButton?: boolean
  // 是否显示菜单
  showMenu?: boolean
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  clickable: true,
  layout: 'horizontal',
  showProgress: true,
  showActionButton: true,
  showMenu: false,
  customClass: '',
})

const emit = defineEmits<{
  click: [novel: Novel]
  action: [novel: Novel]
  menu: [novel: Novel, event: Event]
  imageError: [novel: Novel]
}>()

// 卡片样式
const cardClass = computed(() => {
  const baseClass = 'novel-card'

  const layoutClass = props.layout === 'vertical'
    ? 'novel-card-vertical'
    : 'novel-card-horizontal'

  return [
    baseClass,
    layoutClass,
    props.customClass,
  ].filter(Boolean).join(' ')
})

// 获取状态类型
const getStatusType = (status?: string) => {
  const statusMap: Record<string, any> = {
    '连载中': 'primary',
    '已完结': 'success',
    '暂停': 'warning',
    '审核中': 'info',
  }

  return statusMap[status as string] || 'default'
}

// 获取操作按钮类型
const getActionType = () => {
  if (props.novel.isInLibrary) {
    return 'secondary'
  }
  return 'primary'
}

// 获取操作按钮文字
const getActionText = () => {
  if (props.novel.isInLibrary) {
    return '已添加'
  }
  return '加入书架'
}

// 格式化字数
const formatWordCount = (count: number) => {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万字`
  }
  return `${count}字`
}

// 格式化数量
const formatCount = (count: number) => {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}

// 处理卡片点击
const handleClick = () => {
  if (props.clickable) {
    emit('click', props.novel)
  }
}

// 处理操作按钮点击
const handleAction = () => {
  emit('action', props.novel)
}

// 处理菜单点击
const handleMenuClick = (event: Event) => {
  emit('menu', props.novel, event)
}

// 处理图片加载错误
const handleImageError = () => {
  emit('imageError', props.novel)
}
</script>

<style scoped>
.novel-card {
  @apply overflow-hidden;
}

.novel-card-horizontal {
  @apply flex gap-md;
}

.novel-card-vertical {
  @apply flex flex-col;
}

.novel-cover {
  @apply relative flex-shrink-0;
}

.novel-card-horizontal .novel-cover {
  @apply w-32 h-44;
}

.novel-card-vertical .novel-cover {
  @apply w-full h-48;
}

.cover-image {
  @apply w-full h-full object-cover rounded-custom;
}

.progress-bar {
  @apply absolute bottom-0 left-0 right-0 h-1 bg-black/20 rounded-b-custom overflow-hidden;
}

.progress-fill {
  @apply h-full bg-novel-primary transition-all duration-300;
}

.status-badge {
  @apply absolute top-2 left-2;
}

.novel-info {
  @apply flex-1 flex flex-col min-w-0;
}

.novel-title {
  @apply text-base font-semibold text-text-primary mb-1;
  @apply line-clamp-1;
}

.novel-author {
  @apply text-sm text-text-secondary mb-2;
}

.novel-meta {
  @apply flex items-center gap-2 mb-2 flex-wrap;
}

.category-tag {
  @apply px-2 py-1 bg-novel-primary/20 text-novel-primary text-xs rounded-custom;
}

.tags-container {
  @apply flex gap-1;
}

.tag-item {
  @apply px-2 py-1 bg-bg-light text-text-muted text-xs rounded-custom;
}

.novel-description {
  @apply text-sm text-text-secondary mb-3 flex-1;
  @apply line-clamp-2;
}

.novel-footer {
  @apply flex items-center justify-between;
}

.stats {
  @apply flex gap-3;
}

.stat-item {
  @apply text-xs text-text-muted flex items-center;
}

.novel-menu {
  @apply absolute top-2 right-2;
}

/* 文本截断工具类 */
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>